<script setup lang="ts">
  import { ref } from 'vue';

  let user = ref({name:'张三',age:18,gender:'男'})  // ref定义对象类型

  function add(){
    user.value.age++;
  }

  function change(){
    if(user.value.gender=='男'){
        user.value.gender='女'
    }else{
        user.value.gender='男'
    }
  }

  function changeUser(){
    user.value={name:'李四',age:20,gender:'男'}
    //ref(user) 其实底层是 reactive，但 Vue 对 ref 做了额外的响应式处理，
    // 允许直接替换 user.value，Vue 能够正确检测到 value 的变化并更新页面。
  }
</script>
<template>
    <div class="home">
        <h2>姓名:{{user.name}}</h2>
        <h2>年龄:{{user.age}}</h2>
        <h2>性别:{{user.gender}}</h2>
        <button @click="add">年龄+1</button>
        <button @click="change">改变性别</button>
        <button @click="changeUser">换个人</button>
    </div>
</template>
<style>

</style>